<template>
    <div>
        <!--  新增、修改待办事项  -->
        <el-dialog v-dialogDrag
                   custom-class="dialogClass"
                   :title="title"
                   :visible.sync="addToDoItemDialogVisible"
                   :before-close='saveCancel'
                   width="20%"
                   top="25vh">

            <el-form :model="addToDoItemForm" :rules="rules" ref="addToDoItemRef" label-width="120px"
                     label-position="left">
                <el-form-item label='事项ID' hidden='hidden' prop="id" v-show='true'>
                    <el-input v-model="addToDoItemForm.id" type="text"  placeholder='请输入事项ID' disabled></el-input>
                </el-form-item>
                <el-form-item label='事项名称' prop="itemName">
                    <el-input v-model="addToDoItemForm.itemName" type="text" maxlength="128"  placeholder='请输入事项名称' clearable></el-input>
                </el-form-item>
                <el-form-item label="计划完成时间" prop="planFinishTime">
                    <!--<el-input v-model="addToDoItemForm.planFinishTime" type="text" maxlength="10" placeholder='请选择计划完成时间' clearable></el-input>-->
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="addToDoItemForm.planFinishTime"
                        value-format="yyyy-MM-dd"
                        :picker-options='pickerOptions'
                        style="width: 100%;"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="reset">重置</el-button>
                  <el-button type="primary" @click="saveCancel">取消</el-button>
                  <el-button type="primary" @click="save">确定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '../common/bus';
import { Message } from 'element-ui';

export default {
    name: 'DoItems',
    props: ['title', 'addToDoItemDialogVisible'],
    data () {
        return {
            pickerOptions: {
                // 限制待办事项计划完成时间
                'disabledDate'(time) {
                    return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                }
            },
            addToDoItemForm: {
                id: '',
                itemName: '',
                planFinishTime: '',
            },
            rules: {
                itemName: [
                    {required: true, message: '请输入事项名称', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 128 个字符', trigger: 'blur'}
                ],
                planFinishTime: [
                    {required: true, message: '请选择计划完成时间', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                ],
            },
        }
    },
    created() {
        bus.$on('resetToDoItemForm', ()=> {
            if(this.$refs["addToDoItemRef" ] !== undefined) {
                this.$refs["addToDoItemRef" ].resetFields();
            }
        });

        bus.$on('fillEditToDoItemForm', args => {
            this.addToDoItemForm.id = args.id;
            this.addToDoItemForm.itemName = args.itemName;
            this.addToDoItemForm.planFinishTime = args.planFinishTime;
        });
    },
    methods: {
        // 修改密码表单重置按钮
        reset() {
            if(this.$refs["addToDoItemRef" ] !== undefined) {
                this.$refs["addToDoItemRef" ].resetFields();
            }
            Message.success("重置成功");
        },
        // 修改密码表单取消按钮
        saveCancel: function () {
            //this.addToDoItemDialogVisible = false;
            bus.$emit('showAddDoItem', false);
            if(this.$refs["addToDoItemRef" ] !== undefined) {
                this.$refs["addToDoItemRef" ].resetFields();
            }
        },
        // 修改密码表单确定按钮
        save() {
            this.$refs['addToDoItemRef'].validate((valid) => {
                if (valid) {
                    if (this.addToDoItemForm.id) {
                        this.postRequest('/toDoItem/update', this.addToDoItemForm).then((resp => {
                            if (resp && resp.status === 200) {
                                bus.$emit('showAddDoItem', false);
                                Message.success("修改待办事项成功！");
                            }
                        }));
                    } else {
                        this.postRequest('/toDoItem/insert', this.addToDoItemForm).then((resp => {
                            if (resp && resp.status === 200) {
                                bus.$emit('showAddDoItem', false);
                                Message.success("新增待办事项成功！");
                            }
                        }));
                    }
                }
            })
        },

    },
};
</script>

<style scoped>

</style>